<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="/static/pic/public/logo.png" />
    <title>PhpMethod regist</title>

    <link rel='stylesheet' id='bootstrap-css-css' href='/static/knowledge/css/bootstrap.min.css' type='text/css' media='all'/>
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body data-mod="user" class="user-register">
<style>
    .panel { width: 600px }

    @media (max-width: 600px) {
        .panel { width: 100% }
    }
    .error-data{color:red;}
</style>
<div class="container">
    <div class="header text-center">
        <h1>
            <a href="/" class="logo">
                Knowledge Base
            </a>
        </h1>
        <p class="description text-muted">欢迎来到专业的中文开发者社区</p>
    </div>
    <div class="panel panel-default center-block">
        <div class="panel-heading">
            <h3 class="panel-title">注册</h3>
        </div>
        <div class="panel-body sfModal-content">
            <div class="row bg-white login-modal">
                <div class="col-md-12 login-wrap">

                    <form id="fm" method="POST" role="form" class="mt15" onsubmit="return false;">
                        {:token()}
                        <div class="form-group">
                            <label for="username" class="control-label">你的名字</label>
                            <input id="username" type="text" class="form-control" name="username" placeholder="真实姓名或常用昵称">
                        </div>
                        <div class="form-group">
                            <label for="phone_email" class="control-label">手机号 或 Email</label>
                            <input id="phone_email" type="text" class="form-control" name="phone_email" placeholder="11 位手机号 或 Email">
                        </div>
                        <div class="form-group">
                            <div class="phone-register-only">
                                <div class="captchaInput mb10">
                                    <input type="text" id="captcha" class="form-control" name="captcha" placeholder="右侧的验证码" style="width:50%; display: inline; margin-right: 15px;">
                                    <span class="mt10">
                                        <a id="loginReloadCaptcha" href="javascript:void(0)">
                                            <img src="{:url('index/verify')}" id="captcha-img" onclick="this.src=this.src+'?'" alt="captcha" class="cap" width="120" height="34"/>
                                        </a>
                                    </span>
                                </div>
                                <div class="input-group hidden">
                                    <input name="phonecode" type="text" class="form-control js-user-login__phone-code-value" placeholder="短信验证码">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default js-user-login__phone-vaild-btn" style="width:96px;" type="button">
                                            获取验证码</button>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="password" class="control-label">密码</label>
                            <input id="password" type="password" class="form-control" name="password" placeholder="不少于 6 位的密码">
                        </div>
                        <div class="form-group error-data"></div>
                        <div class="form-group clearfix">
                            <button type="submit" id="register" class="btn-block btn btn-primary pl20 pr20 pull-right">
                                注册
                            </button>
                        </div>
                        <div class="text-muted text-center more-login-area">
                            <span class="more-login-words">更多登录方式</span>
                        </div>
                        <div class="widget-login mb15 text-center">

                        </div>
                        <div class="form-group clearfix">
                            <a class="btn-block btn btn-default pull-right pl20 pr20" href="{:url('login')}">
                                已有账号登录
                            </a>
                        </div>
                        <p class="text-muted text-center mb15">登录即表示你同意网站的<a href="/tos" target="_blank">《服务条款》</a></p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="/static/knowledge/js/bootstrap.min.js"></script>
<script>
    $("#register").click(function () {
        $('#captcha-img').attr('src', $('#captcha-img').attr('src') + '?')
        $('.error-data').text('')
        $.post('{:url("adduser")}', $('#fm').serialize(), function (res) {
            if (res.code != 200) {
                if (res.msg.captcha == '验证码不正确') {
                    $('#captcha').val('');
                    $('.error-data').html('验证码不正确');
                } else {
                    if (('username' in res.msg) || ('password' in res.msg)) {
                        $('.error-data').text('用户名密码错误')
                    }
                    if ('phone_email' in res.msg) {
                        $('.error-data').text(res.msg.phone_email)
                    }
                    if('__token__' in res.msg){
                        $('.error-data').text('正在拼命加载中>>>>请刷新本页面后重试')
                    }
                }
                $("input[name=__token__]").val(res.token);
            } else {
                location.href = "{:url('index')}";
            }
        });
    });
</script>
</html>